<template>
	<view class="audit-details">
		<uni-nav-bar background-color="#FFF" :right-width="'120rpx'">
			<block slot="left">
				<uni-icons @click="utils.goBack()" type="back" size="24" color="#000" />
			</block>
			<view style="width: 100%;display: flex;align-items: center;justify-content: center;">活动审核</view>
			<block slot="right" v-if="new Date(endDate) < new Date() || 1">
				<text class="score-rank" @click="scoreRank()">已审核</text>
			</block>
		</uni-nav-bar>
		<view v-for="(item, inx ) in activityList" :key="inx">
			<view v-show="currentIndex==inx">
				<view class="title">
					{{item.name}}
				</view>
				<view class="task-box">
					<view class="task-title">
						<view class="title-text">{{activityInfo.title}}</view>
						<text class="state" :class="[{state2: item.score_teacher > 0}]">{{item.score_teacher > 0?'已完成':'待审核'}}</text>
					</view>
					<view class="textarea-box1">
						<view class="info-item">
							<text>姓名：</text>
							<text>{{item.name}}</text>
						</view>
						<view class="info-item">
							<text>班级：</text>
							<text>{{item.clas}}</text>
						</view>
						<view class="info-item">
							<text>MBTI人格：</text>
							<text>{{item.mbti}}</text>
						</view>
						<view class="info-item">
							<text>个人简介：</text>
							<text>{{item.brief}}</text>
						</view>
						<view class="info-item">
							<text>上传作品：</text>
						</view>
						<view class="files" v-for="(file, i) in JSON.parse(item.files)" :key="i">
							<zy-file :src="file.path" :name="file.name" :size="file.size"></zy-file>
						</view>
						<view class="info-item">
							<text>视频简介：</text>
							<text>{{item.description}}</text>
						</view>
					</view>

					<view class="time-publish">
						<text>发布时间：{{handleTime(item.add_time)}}</text>
					</view>
					<view class="medal-type">
						<view class="medal-select-box">
							<text>勋章类型</text>
							<medal-select :disabled="isPublish" :default-value="item.medal_name" :list="medalList" @change="(name) => {medalChange(name, item)}"></medal-select>
						</view>
						<uni-icons type="right"></uni-icons>
					</view>
					<view v-if="!isPublish">
						<view class="tea-info" style="margin: 32rpx 0;">
							<text>请评分</text>
						</view>	
						<view class="score-input">
							<input type="number" maxlength="2" :value="item.evaluation" @input="e=>scoreInput(e, item)" placeholder="请填写10以内数字" placeholder-style="color: #999999;">
						</view>	
					</view>
					<view v-else class="" style="margin: 32rpx 0; color: #999999;font-size: 30rpx;">
						评分：<text style="color: #162641;font-size: 38rpx;">{{item.evaluation}}</text>
					</view>
					<view class="eva-content" :class="{'show-eva-content': options.state==2}">
						<view class="tea-info" v-if="options.state==1">
							<text>请评价</text>
						</view>	
						<view class="eva-score">
							<image :src="`/static/score${i<=item.score_teacher?1:''}.png`" v-for="i in 3" :key="i" @click="setScore(item, i)" mode="aspectFill" ></image>
							<text v-if="item.score_teacher>0" style="margin-left: 16rpx;">{{item.score_teacher}}星</text>
						</view>
						<view class="eva-text" v-if="isPublish">
							{{item.evaluate_content}}
						</view>
						<view class="eva-textarea" v-else>
							<textarea :value="item.evaluate_content" name="" id="" @input="e=>evaContentInput(e, item)" placeholder="请输入评价（选填）" placeholder-style="color: #999;" maxlength="500"></textarea>
						</view>
					</view>
					<view class="confirm-recommend" v-if="!isPublish">
						<text class="con-btn" style="width: 100%;" @click="postexaminActivity(item)">确定</text>
					</view>
				</view>
			</view>
		</view>

		<view class="operation-button" v-if="activityList.length>0">
			<text class="prev" :style="{color: currentIndex==0?'#999':'#333'}" @click="prevActive()">上一个</text>
			<text class="next" :style="{filter: currentIndex==(this.activityList.length-1)?'grayscale(100%)':'none'}" @click="nextActive()">下一个</text>
		</view>
		<view v-if="activityList.length==0" class="no-list">暂无待审核的活动</view>
		
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.bg" :show="recommendPopup">
		</uni-transition>
		<uni-transition mode-class="fade"
			:styles="utils.transitionStyles.fade"
			:show="recommendPopup">
			<view class="tj-tips popup-top">
				<view class="tj-title">
					是否将此项记录纳入活动轨迹？
				</view>
				<view class="tj-bottom">
					<text @click="recommendPopup=false">否</text>
					<text class="confirm-btn" @click="recommendPopup=false">是</text>
				</view>
			</view>
		</uni-transition>
	</view>
</template>
<script>
import textEditor from '../student/components/text-editor.vue'
import weekPicker from '@/components/date-picker/week-picker.vue'
import medalSelect from '@/components/select.vue'

export default {
	components: {
		weekPicker,
		textEditor,
		medalSelect
	},
	data() {
		return {
			options: {}, // 参数信息
			activityInfo: {}, // 活动信息
			activityList:[], // 待审核的活动列表
			currentIndex: 0, // 当前显示的待审核的下标
			recommendPopup: false, // 推荐弹窗
			medalList: [], // 可选择的勋章列表
			endDate: '', // 活动结束时间
			isPublish: false // 是否发送结果到首页banner
		}
	},
	onLoad(options) {
		this.options = options
		this.getMedalList()
        this.getActivityStudentList(this.options.state-1)
	},
    methods: {
		// 处理时间显示
		handleTime(time){
			time = time.split(' ')[0].split('-').join('.')
			return time
		},
		// 老师查询某个活动的每个学生完成的具体情况
        getActivityStudentList(activityState){
			
			this.api.get('activity/getActivityStudentList', {
				state: activityState,
				activityId: this.options.id
			}).then(res=>{
				if(res.data.state != 'ok') return
				let list = res.data.stuActivityList || [];
				this.activityList = this.activityList.concat(list)
				if(activityState == 0){
					this.activityInfo = res.data.activity
					this.endDate = this.activityInfo.end_date;
					// 修改日期格式为年/月/日，为了兼容ios系统使用new Date()
					this.endDate = this.endDate.split('-').join('/')
					this.getActivityStudentList(1)
				}else if(this.options.stuId){
					// 如果学生的账号id如果存在，优先展示当前学生
					this.currentIndex = this.activityList.findIndex(item => item.accountId == this.options.stuId)
				}

			})
		},
		// 获取勋章
		getMedalList(){
			this.api.get('activity/getMedalList', {}).then(res=>{
				if(res.data.state == 'ok'){
					this.medalList = res.data.medalList;
				}
			})
		},
		// 选择勋章
		medalChange(name, item){
			this.$set(item, 'medal_name', name)
		},
		// 评分
		scoreInput(e, item){
			let score = e.detail.value;
			score = score>10 ? 10 : score
			this.$set(item, 'evaluation', score)
		},
		// 评论
		evaContentInput(e, item){
			this.$set(item, 'evaluate_content', e.detail.value)
		},
		postexaminActivity(task, type){
			// taskType 1.任务 2.日常劳动 3.职业体验 4.重要他人 5.乐学园

			if(!task.evaluation){
				this.utils.showToast('请评分')
				return
			}
			if(!task.score_teacher){
				this.utils.showToast('评价分数需大于0')
				return
			}
			if(!task.medal_name){
				this.utils.showToast('请选择勋章')
				return
			}
			this.api.post('activity/examineActivity', {
				activityUserId: task.id,
				score: task.score_teacher,
				content: task.evaluate_content || '',
				evaluation: task.evaluation,
				medalName: task.medal_name
			}).then(res=>{
				if(res.data.state != 'ok') return
				this.utils.showToast('审核成功')
				// 审核成功，重新获取数据
				setTimeout(()=>{
					this.getActivityStudentList(this.options.state-1)
				}, 2000)
			})
			
		},
		// 设置分数
		setScore(item, i){
			if(this.isPublish) return;
			this.$set(item, 'score_teacher', i)
		},
		// 积分排行
		scoreRank(){
			uni.navigateTo({
				url: `/pages/teachers/activity-rank?id=${this.options.id}`
			})
		},
		// 点击 上一个 按钮
		prevActive(){
			
			if(this.currentIndex > 0){
				this.currentIndex --
			}
		},
		// 点击 下一个 按钮
		nextActive(){
			// 判断当前活动是否是最后一个
			if(this.currentIndex < (this.activityList.length-1)){
				this.currentIndex ++
			}
		},
    }
}
</script>
<style lang="less">
	.audit-details{
		
	}
	.score-rank{
		padding-right: 8px;
		color: #28C2CD;
		font-size: 32rpx;
	}
	.task-box{
		padding: 40rpx 32rpx;
	}
	.title{
		height: 104rpx;
		line-height: 104rpx;
		font-size: 34rpx;
		padding-left: 32rpx;
		font-weight: 600;
		background-color: #F9F9F9;
	}
	.textarea-box1{
		border-radius: 20rpx;
		border: 1rpx solid #EEEEEE;
		padding: 0 32rpx 32rpx;
	}
	.info-item{
		margin-top: 32rpx;
		color: #666666;
	}
	
	.files{
		margin-top: 20rpx;
	}
	.time-publish{
		margin-top: 24rpx;
		color: #999;
		font-size: 24rpx;
	}
	.medal-type{
		margin-top: 32rpx;
		padding-top: 32rpx;
		border-top: 1rpx dashed #EEEEEE;
		display: flex;
		justify-content: space-between;
	}
	.medal-select-box{
		display: flex;
	}
	.score-input{
		background: #F4F4F4;
		padding: 32rpx;
		border-radius: 20rpx;
		input{
			font-size: 28rpx;
		}
	}
	// 评价
	.eva-content{
		margin-top: 32rpx;
	}
	.show-eva-content{
		position: relative;
		margin-top: 64rpx;
		&::after{
			position: absolute;
			left: 0;
			top: -32rpx;
			content: '';
			width: 200%;
			border-width: 2rpx;
			border-style: dashed;
			border-color: #000;
			transform: scale(0.5) translateX(-50%);
            opacity: .1;
		}
	}
	.tea-info{
		display: flex;
		align-items: center;
		color: #333333;
		image{
			width: 5rpx;
			height: 78rpx;
			border-radius: 156rpx;
			margin-right: 24rpx;
		}
		.tips{
			color: #999999;
			font-size: 26rpx;
		}
	}
	.eva-score{
		margin: 24rpx 0;
		display: flex;
		align-items: center;
		color: #999999;
		image{
			margin-right: 25rpx;
			width: 48rpx;
			height: 51rpx;
		}
	}
	.eva-text{
		color: #666666;
		font-size: 28rpx;
		line-height: 44rpx;
	}
	.eva-textarea{
		background-color: #F4F4F4;
		border-radius: 20rpx;
		padding: 32rpx;
		textarea{
			width: 100%;
			font-size: 28rpx;
			height: 220rpx;
		}
	}
	.confirm-recommend{
		margin-top: 32rpx;
		text{
			display: inline-block;
			width: 333rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			text-align: center;
			font-weight: 600;
		}
		.re-btn{
			border: 2rpx solid #BFBFBF;
		}
		.con-btn{
			background-color: #28C2CD;
			color: #fff;
		}
	}
	.operation-button{
		padding: 0 40rpx 40rpx;
		display: flex;
		justify-content: space-between;
		text{
			width: 320rpx;
			height: 80rpx;
			line-height: 80rpx;
			position: relative;
			text-align: center;
			&::after{
				position: absolute;
				top: -40rpx;
				left: 50%;
				content: '';
				border: 2rpx solid #999;
				width: 640rpx;
				height: 160rpx;
				transform: translateX(-50%) scale(.5);
				border-radius: 40rpx;
			}
		}
		.next{
			color: #28C2CD;
			&::after{
				border-color: #28C2CD;
			}
		}
	}
	.task-title{
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
		.title-text{
			width: 82%;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}
	.state{
		position: relative;
		padding-left: 20rpx;
		color: #FF4F01;
		font-size: 24rpx;
		line-height: 32rpx;
		&::after{
			position: absolute;
			content: '';
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			top: 12rpx;
			left: 0%;
			// transform: translateY(-5rpx);
			background-color: #FF4F01;
		}
	}
	.state2{
		color: #999999;
		&::after{
			background-color: #999;
		}
	}
	// 弹窗
	.tj-tips{
		width: 540rpx;
		height: 230rpx;
		border-radius: 20rpx;
		background-color: #fff;
		
		text{
			display: inline-block;
			width: 50%;
			line-height: 88rpx;
			text-align: center;
			box-sizing: border-box;
		}
		.confirm-btn{
			border-left: 1rpx solid #F0F0F0;
			color: #28C2CD;
		}
	}
	.tj-title{
		padding: 50rpx 40rpx 49rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #22242A;
		border-bottom: 1rpx solid #F0F0F0;
	}
	.tj-bottom{
		font-size: 32rpx;
		color: #999999;
		
	}
	.no-list{
		// height: calc(100vh - 44rpx);
		line-height: calc(100vh - 44rpx);
		text-align: center;
		color: #999;
	}
</style>